<template>
    <div class="levelAdd">
        <header>新增等级</header>
        <div class="contents">
            <div class="ad_list">
                <div class="key_targets_title">等级信息</div>
            </div>
            <div class="level_info">
                <div class="level_name">
                    <div>
                        <span>等级名称</span>
                    </div>
                    <el-input v-model="levelName" placeholder="请输入名称" class="level_input"></el-input>
                </div>
                <div class="integral_range">
                    <span>积分限制</span>
                    <div class="wrap">
                        <el-input v-model="integralStart" class="integral_start"></el-input>
                        <span> -- </span>
                        <el-input v-model="integralEnd" class="integral_end"></el-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="contents" style="display:none;">
            <div class="ad_list">
                <div class="key_targets_title">升级福利</div>
            </div>
            <div class="tables">
                <el-table :data="tableDatas" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column prop="SUBJECT" label="优惠券名称" width="300"> </el-table-column>
                    <el-table-column prop="AVAILDAYS" label="有效期" width="300"> </el-table-column>
                    <el-table-column prop="NUM" label="数量" width="300"> </el-table-column>
                    <el-table-column prop="options" label="操作" width="300">
                        <template slot-scope="scope">
                            <span class="opretions" @click="edits(scope.row.RIGHTSCASHVOLUMEID)">编辑</span>
                            <span class="dels" @click="dels(scope.row.RIGHTSCASHVOLUMEID)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="ad_list_title">
                    <el-button type="danger" style="background:#e7251a;" @click.native="goAdd">添加优惠券</el-button>
                </div>
            </div>
        </div>
        <div class="blanks" style="width:100%;height:100px;background:#f0f2f5;"></div>
        <div class="buttonss">
            <el-button @click.native="$router.push({path:'/setting/integralSet'})">取消</el-button>
            <el-button type="danger" style="background:#e7251a;" @click.native="submits">提交</el-button>
        </div>
        <!--添加优惠券-->
        <el-dialog title="添加优惠券" :visible.sync="dialog1" width="90%" style="margin-left:100px;display:none;">
            <div class="dialog_content">
                <div class="d_condition">
                    <div class="d_condition_1">
                        <p>商品名称：</p>
                        <el-input v-model.trim="input2" placeholder="请输入" style="width:300px;"></el-input>
                    </div>
                    <div class="d_condition_2">
                        <p>类型：</p>
                        <el-select clearable v-model="value3" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <div class="d_condition_3">
                        <el-button type="danger" style="background:#e7251a;" @click.native="querys2">查询</el-button>
                        <el-button @click.native="resets2">重置</el-button>
                    </div>
                    <div class="d_condition_4">
                        <el-button type="danger" style="background:#e7251a;" @click.native="addT">新增优惠券</el-button>
                    </div>
                </div>
                <div class="d_selected" v-if="selectArr2.length>0">
                    <p>
                        <img src="../../assets/images/market/select2.png" alt="" />
                        <span>已选择&nbsp;
                            <label>{{selectArr2.length}}</label>&nbsp;项</span>
                    </p>
                </div>
                <div class="d_tables">
                    <el-table v-loading="loading2" :data="actList2" style="width: 100%" @selection-change="handleSelectionChange2">
                        <el-table-column type="selection" width="80"> </el-table-column>
                        <el-table-column prop="SUBJECT" label="优惠券名称" width="250"> </el-table-column>
                        <el-table-column prop="CATEGORY" label="优惠券类型" width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.CATEGORY==1">满减券</span>
                                <span v-else-if="scope.row.CATEGORY==2">兑换券</span>
                                <span v-else-if="scope.row.CATEGORY==3">服务券</span>
                                <span v-else-if="scope.row.CATEGORY==4">N元券</span>
                                <span v-else-if="scope.row.CATEGORY==5">折扣券</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="USERANGE" label="适用范围" width="200">
                            <template slot-scope="scope">
                                <span v-if="scope.row.USERANGE">{{scope.row.USERANGE}}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="validDate" label="期限（天）" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.Date" style="width:75px;" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="condition" label="兑换条件（分）" width="200">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.Score" style="width:75px;" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="page2" :page-sizes="[6, 8, 10]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="18"> </el-pagination>
                </div>
                <div class="d_button">
                    <el-button @click.native="dialog1=false">取消</el-button>
                    <el-button type="danger" style="background:#e7251a;" @click.native="adds">添加</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { setCookie, getCookie, removeCookie } from '@/assets/js/cookie'
    import qs from 'qs'
    export default {
        name: "levelAdd",
        data() {
            return {
                levelName: "", // 等级名称
                integralStart: '', // 积分限制起点
                integralEnd: '', // 积分限制起点                
                tableDatas: [],
                selectArr: [], //已选择的数组集合
                dialog1: false, // 是否显示dialog                
                input2: "", // 添加优惠券 - 商品名称
                value3: "", // 添加优惠券 - 类型选择
                selectArr2: [],
                tableDatas2: [],
                options3: [
                {
                    value: 1,
                    label: '满减劵'
                }, {
                    value: 2,
                    label: '兑换劵'
                }, {
                    value: 3,
                    label: '服务券'
                }, {
                    value: 4,
                    label: 'N元劵'
                }, {
                    value: 5,
                    label: '折扣劵'
                }],
                loading2: true,
                page2: 1,
                pageSize2: 6,
                flags:false,//防止重复提交
            };
        },
        computed: {
            //优惠券 请求参数
            objs2() {
                let obj = {};
                obj.PAGE_NO = this.page2;
                obj.PAGE_SIZE = this.pageSize2;
                this.input2 ? obj.LIKESTR = this.input2 : null;
                this.value3 ? obj.CATEGORY = this.value3 : null;
                return obj;
            },
            //优惠券 分页数据
            actList2() {
                let arr = this.tableDatas2.CASHVOLUMERECORDARR;
                if(arr) {
                    arr.forEach(function(v) {
                        v.Date = 30; //创建一个期限字段
                        v.Score = 50; //创建一个兑换条件字段
                    })
                    return arr;
                }
            }
        },
        created() {
        	//离开页面提醒
        	window.onbeforeunload = function(e) {
                var e = window.event || e;
                e.returnValue = ("在新增或编辑时，关闭选项卡将导致数据无法保存");
            }
            this.getList();
            this.getTList();
        },
        methods: {        	
            //升级福利劵列表
            getList() {
                this.$axiosPost('/4SCAFE/RightsCashVolume/getRightsCashVolumeList.action').then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.tableDatas = res.RIGHTSCASHVOLUMEARR;
                    }
                })
            },
            //优惠券列表
            getTList() {
                this.loading2 = true;
                this.$axiosPost('/4SCAFE/CashVolumeRecord/getCashVolumeRecordList.action', this.objs2).then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.loading2 = false;
                        this.tableDatas2 = res;
                    }
                })
            },
            handleSelectionChange(val) {
                this.selectArr = val;
                //console.log(this.selectArr);
            },
            //编辑
            edits(id) {
                this.$router.push({
                    path: '/setting/editIntegral2/' + id
                });
            },
            //删除
            dels(id) {
                this.$axiosPost('/4SCAFE/RightsCashVolume/deleteRightsCashVolume.action', {
                    RIGHTSCASHVOLUME_ID: id
                }).then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.$message.success('删除成功');
                        this.getList();
                    }
                })
            },
            //提交
            submits() {
                if(this.levelName == '') {
                    this.$alert('请输入等级名称', '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                if(this.integralStart == '' && this.integralStart !== 0) {
                    this.$alert('请输入最小积分', '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                if(this.integralEnd == '') {
                    this.$alert('请输入最大积分', '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                if(isNaN(this.integralStart)){
                	this.$alert('最小积分请输入数字', '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                if(isNaN(this.integralEnd)){
                	this.$alert('最大积分请输入数字', '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                let obj = {};                
                obj.GRADENAME = this.levelName;
                obj.STARTPOINTS = +this.integralStart;
                obj.ENDPOINTS = +this.integralEnd;
                //console.log(obj);return;
                if(this.flags){
                	return false;
                }                                  
                this.$axiosPost('/4SCAFE/Grade/saveGrade.action', obj).then(res => {
                    //console.log(res);                      
                    if(res.STATUS_CODE === 1) {  
                    	this.flags = true;
                        this.$message.success('新增成功');
                        setTimeout(() => this.$router.push({
                            path: '/setting/integralSet'
                        }), 1000);
                    }
                })
            },
            handleSelectionChange2(val) {
                this.selectArr2 = val;
                console.log(this.selectArr2);
            },
            handleSizeChange2(val) {
                this.loading2 = true;
                this.pageSize2 = val;
                this.getTList();
            },
            handleCurrentChange2(val) {
                this.loading2 = true;
                this.page2 = val;
                this.getTList();
            },
            //查询
            querys2() {
                this.getTList();
            },
            //重置
            resets2() {
                this.input2 = this.value3 = '';
            },
            // 添加优惠券
            goAdd() {
                this.dialog1 = true;
            },
            // 新增/编辑优惠券
            goEditAddCoup() {
                this.$router.push("/setting/editAddCoupon");
            },
            //添加
            adds() {
                if(this.selectArr2.length === 0) {
                    this.$alert('请选择优惠券', '提示', {
                        confirmButtonText: '确定'
                    })
                    return;
                }
                let arr = JSON.parse(JSON.stringify(this.selectArr2)),
                    obj = {};
                arr.forEach(function(v) {
                    delete v.CATEGORY;
                    delete v.EXPDATE;
                    delete v.NUM;
                    delete v.STARTDATE;
                    delete v.STATUS;
                    delete v.USERANGE;
                    v.AVAILDAYS = +v.Date;
                    v.INTEGRAL = +v.Score;
                    delete v.Date;
                    delete v.Score;
                })
                //console.log(arr);return;
                obj.POINTEXCHANGEARR = JSON.stringify(arr);                
                this.$axiosPost('/4SCAFE/PointExchange/batchAddPointExchange.action', obj).then(res => {
                    //console.log(res);                    
                    if(res.STATUS_CODE === 1) {                        
                        this.$message.success('添加成功');
                        this.dialog1 = false;
                        this.getList();
                    }
                })
            },
            //新增优惠券
            addT() {
                this.$router.push({
                    path: '/setting/addIntegral2'
                });
            },
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .levelAdd {
    	min-height:100%;
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            width: 97%;
            margin: 25px auto;
            padding: 15px 25px;
            padding-bottom: 30px;
            background: #fff;
            .level_info {
                -webkit-display: flex;
                display: flex;
                margin-top: 30px;
                padding-bottom: 30px;
                .level_name {
                    margin-right: 50px;
                    span {
                        font-size: 15px;
                    }
                    .level_input {
                        margin-top: 12px;
                        width: 300px;
                    }
                }
                .integral_range {
                    span {
                        font-size: 14px;
                    }
                    .wrap {
                        -webkit-display: flex;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 12px;
                        .integral_start {
                            width: 150px;
                        }
                        .integral_start {
                            width: 200px;
                        }
                        span {
                            width: 50px;
                            text-align: center;
                        }
                    }
                }
            }
            .ad_list {
                .key_targets_title {
                    height: 55px;
                    font-size: 16px;
                    line-height: 55px;
                    border-bottom: 1px solid #dcdcdc;
                    font-weight: 700;
                }
                .ad_list_tab {
                    display: flex;
                    padding-top: 10px;
                }
            }
            .selected {
                margin-top: 15px;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                background: #fafafa;
                p {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0 10px;
                    }
                    span {
                        font-size: 16px;
                        color: #717a7d;
                        label {
                            color: #e7251a;
                        }
                    }
                }
            }
            .tables {
                margin-top: 30px;
                padding-bottom:30px;
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
                .opretions, .dels {
                    color: #1d93ff;
                    cursor: pointer;
                    margin: 0 2px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .ad_list_title {
                margin-top: 20px;
                text-align: right;
                padding-right: 150px;
            }
        }
        .buttonss {
        	background: #fff;
            padding: 30px;           
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .dialog_content {
            border-top: 1px solid #f0f0f0;
            margin-top: 10px;
            padding-top: 25px;
            .d_condition {
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-bottom: 25px;
                .d_condition_1, .d_condition_2, .d_condition_3 {
                    display: flex;
                    align-items: center;
                }
                .d_condition_1 {
                    margin-left: -70px;
                }
            }
            .d_selected {
                width: 98%;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                background: #fafafa;
                margin-bottom: 10px;
                p {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0 10px;
                    }
                    span {
                        font-size: 16px;
                        color: #717a7d;
                        label {
                            color: #e7251a;
                        }
                    }
                }
            }
            .d_tables {
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
            }
            .d_button {
                width: 95%;
                display: flex;
                justify-content: flex-end;
                margin: 18px 0 8px 0;
            }
            .el-icon-close {
                font-size: 20px;
                position: absolute;
                left: 80px;
                color: #949494;
            }
        }
    }
</style>